<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index属性的应用</title>
		<style>
			div {
				width: 182px;
				height: 253px;
				position: absolute;
			}
			#ten {
				background: url(images/ten.jpg) no-repeat;
				z-index: 1;
				left: 20px;
				top: 100px;
			}
			#jack {
				background: url(images/jack.jpg) no-repeat;
				z-index: 2;
				left: 100px;
				top: 100px;
			}
			#queen {
				background: url(images/queen.jpg) no-repeat;
				z-index: 3;
				left: 180px;
				top: 100px;
			}
			#king {
				background: url(images/king.jpg) no-repeat;
				z-index: 4;
				left: 260px;
				top: 100px;
			}
			#ace {
				background: url(images/ace.jpg) no-repeat;
				z-index: 5;
				left: 340px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<h3>z-index属性的应用</h3>
		<hr />
		<div id="ten"></div>
		<div id="jack"></div>
		<div id="queen"></div>
		<div id="king"></div>
		<div id="ace"></div>
	</body>
</html>
